<template>
  <!-- 批量支付 -->
  <el-dialog
    v-model="dialogVisible"
    title="订单支付"
    width="60%"
    :before-close="handleClose"
  >
    <el-form :model="{}" v-loading="loading">
      <el-row :gutter="24">
        <!-- <el-col :span="24" class="f-s-14 f-w-bold mb-lg">订单详情</el-col>
        <el-col :span="7" class="f-caption">
          订单编号：JY20230515091827
        </el-col>
        <el-col :span="7" class="f-caption">
          订单生成时间：2021.06.20 07:50:32
        </el-col>
        <el-col :span="24" class="mt-lg">
          <c-table-template border :data="[]">
            <el-table-column label="车辆信息" align="center" />
            <el-table-column label="单价" align="center" />
            <el-table-column label="数量" align="center" />
            <el-table-column label="小计" align="center" />
          </c-table-template>
        </el-col> -->
        <el-col :span="24" class="f-s-14 f-w-bold mt-lg mb-lg">支付方式</el-col>
        <el-col :span="24">
          <div class="flex">
            <div class="flex-1 flex">
              <div class="or-code mr-lg">
                <c-qrcode-vue :value="code"></c-qrcode-vue>
              </div>
              <div>
                <div class="f-s-14">
                  <span>应付金额：</span>
                  <span style="color: #ff6355"
                    >￥{{ filters.thousands(sumAccount) }}</span
                  >
                </div>
                <div class="flex mt-lg">
                  <div class="wechat-logo">
                    <img src="@/assets/img/WeChat-LOGO.png" />
                  </div>
                  <span class="f-s-12 ml-lg">支付微信扫码支付</span>
                </div>
                <div class="mt-30">请您尽快完成支付，否则订单将自动取消</div>
              </div>
            </div>
            <div class="divider"></div>
            <div class="flex-1">
              <div class="flex mt-lg">
                <div class="balance">
                  <img src="@/assets/img/balance.png" />
                </div>
                <span class="f-s-14 ml-lg">余额支付</span>
              </div>
              <div class="f-s-12 mt-lg mb-lg">
                <span>当前余额为：</span>
                <span>￥ {{filters.thousands(member.currentAmount)}}</span>
              </div>
              <el-button @click="handleBalancePay">立即支付</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button size="large" @click="handleClose">取 消</el-button>
      <el-button size="large" type="primary" @change="onPaymentSuccess"
        >支付完成</el-button
      >
    </template>
  </el-dialog>

  <c-check-payment :type="type" ref="cCheckPaymentRefs" @change="onPaymentSuccess"/>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { addition } from "@/utils/compute.js";
import cQrcodeVue from "qrcode.vue";
import cCheckPayment from './CheckPayment.vue'
import {getLocalStorage} from '@/utils/cache.js'
const emits = defineEmits(["change"]);
const props = defineProps({
  type:{
    type: Number,
    default:0 // 0 订单费用  1 车费用
  }
})
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
const loading = ref(false);
const multiples = ref([]);
const code = ref("");
const sumAccount = ref("0");
const member = ref({});
const cCheckPaymentRefs = ref()
const handleBalancePay =()=>{
  const user = getLocalStorage('USER_INFO')
  if(!user.payPassword) {
    ElMessage.warning('未设置支付密码,请前往个人中心设置！')
    return
  }
  cCheckPaymentRefs.value.handleOpen(multiples.value)
}
const onPaymentSuccess =()=>{
  emits('change')
  handleClose()
}
const handleOpen = async (item) => {
  loading.value = true;
  dialogVisible.value = true;
  try {
    multiples.value = item
    const ids = item.map((x) => x.id);
    sumAccount.value = (item || []).reduce((n, x) => {
      return addition(n, x.amount);
    }, 0);
    let wxUrl = '/sellerBill/payBills'
    if(props.type === 1) {
      wxUrl = '/SellerBillExtend/payBillsExtend'
    }
    const wxCode = await proxy.$post({
      url: wxUrl,
      data: ids,
    });
    code.value = JSON.parse(wxCode).code_url;

    member.value = await proxy.$get({
      url: "/sellerAmount/sellerAmount",
    });
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
const handleClose = () => {
  dialogVisible.value = false;
};
defineExpose({
  handleOpen,
});
</script>
<style lang="less" scoped>
.or-code {
  width: 106px;
  height: 106px;
}
.wechat-logo {
  width: 20px;
  height: 20px;
}
.balance {
  width: 28px;
  height: 20px;
}
.divider {
  width: 1px;
  margin: 0 12px;
  min-height: 100px;
  background: #f2f2f2;
}
</style>
